<template>
  <a-drawer
    :title="title"
    :maskClosable="true"
    :width="drawerWidth"
    placement="right"
    :closable="true"
    @close="handleCancel"
    :visible="visible"
    style="height: 100%; overflow: auto; padding-bottom: 53px"
  >
    <template slot="title">
      <div style="width: 100%">
        <span>{{ title }}</span>
        <span
          style="
            display: inline-block;
            width: calc(100% - 51px);
            padding-right: 10px;
            text-align: right;
          "
        >
          <a-button
            @click="toggleScreen"
            icon="appstore"
            style="height: 20px; width: 20px; border: 0px"
          >
          </a-button>
        </span>
      </div>
    </template>

    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item
          label="所属设备"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input
            placeholder="所属设备"
            :disabled="true"
            v-decorator.trim="['devName', validatorRules.notBlank]"
          />
        </a-form-item>
        <!-- <a-form-item
          label="所属设备编号"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input
            placeholder="所属设备编号"
            :disabled="true"
            v-decorator.trim="['devCode', validatorRules.notBlank]"
          />
        </a-form-item> -->
        <a-form-item
          label="所属设备编码通道"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input
            placeholder="所属设备编码通道"
            :disabled="true"
            v-decorator.trim="['relationDeviceIndex', validatorRules.notBlank]"
          />
        </a-form-item>
        <a-form-item label="名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input
            placeholder="名称"
            :disabled="this.title == '详情' ? true : false"
            v-decorator.trim="['name', validatorRules.notBlank]"
          />
        </a-form-item>

        <a-form-item
          label="是否启用"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-radio-group
            v-decorator.trim="['used', validatorRules.notBlank]"
            :disabled="this.title == '详情' ? true : false"
          >
            <a-radio value="1">是</a-radio>
            <a-radio value="0">否</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item
          label="码流输出地址"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input
            placeholder="码流输出地址"
            :disabled="this.addresValue"
            v-decorator.trim="[
              'streamAddr',
              {
                getValueFromEvent: (event) => {
                  return event.target.value.replace(/[\u4E00-\u9FA5]/g, '');
                },
              },
            ]"
          />
          <a-button
            @click="editAddrs()"
            :disabled="this.title == '详情' ? true : false"
            size="small"
            style="float: right"
            >编辑地址</a-button
          >
          <!--  判断  v-show="this.editShow"   -->
          <a-button
            @click="streamAddrs()"
            :disabled="this.title == '详情' ? true : false"
            size="small"
            style="float: right"
            >重新获取</a-button
          >
        </a-form-item>
        <a-form-item
          label="是否有云台"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-select
            placeholder="请选择"
            :disabled="true"
            v-decorator.trim="['hasPtz', validatorRules.notBlank]"
          >
            <a-select-option value="1">是</a-select-option>
            <a-select-option value="0">否</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          label="云台地址"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input
            :disabled="this.ptzValue"
            placeholder="云台地址"
            v-decorator.trim="[
              'ptzAddr',
              {
                getValueFromEvent: (event) => {
                  return event.target.value.replace(/[\u4E00-\u9FA5]/g, '');
                },
              },
            ]"
          />
          <a-button
            @click="ptzEditAddrs()"
            :disabled="this.title == '详情' ? true : false"
            size="small"
            style="float: right"
            v-show="form.getFieldValue('hasPtz') === '1'"
            >编辑地址</a-button
          >
          <!-- 判断  v-show="form.getFieldValue('hasPtz') === '1' && this.editPtzShow"  -->
          <a-button
            @click="ptzAddrs()"
            :disabled="this.title == '详情' ? true : false"
            size="small"
            v-show="form.getFieldValue('hasPtz') === '1'"
            style="float: right"
            >重新获取</a-button
          >
        </a-form-item>
        <a-form-item label="地点" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input
            placeholder="地点"
            :disabled="this.title == '详情' ? true : false"
            v-decorator.trim="['location']"
          />
        </a-form-item>
        <a-form-item label="描述" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input
            placeholder="描述"
            :disabled="this.title == '详情' ? true : false"
            v-decorator.trim="['cameraDesc']"
          />
        </a-form-item>
        <!-- <a-form-item label="云台端口" :labelCol="labelCol" :wrapperCol="wrapperCol">
					<a-input :disabled="!(form.getFieldValue('hasPtz') === '1')" placeholder="云台端口" v-decorator.trim="[ 'ptzPort']" />
				</a-form-item>
				<a-form-item label="云台协议" :labelCol="labelCol" :wrapperCol="wrapperCol">
					在对应的协议组中选择
					<a-select :disabled="!(form.getFieldValue('hasPtz') === '1')" placeholder="请选择" v-decorator.trim="[ 'ptzProtocol']">
						<a-select-option v-for="item in ptzProtocolList" :key="item" :value="item">
							{{item}}
						</a-select-option>
					</a-select>
				</a-form-item> -->
      </a-form>
    </a-spin>

    <div class="drawer-bootom-button" v-show="!disableSubmit">
      <a-popconfirm
        title="确定放弃编辑？"
        @confirm="handleCancel"
        okText="确定"
        cancelText="取消"
        :disabled="this.title == '详情' ? true : false"
      >
        <a-button style="margin-right: 0.8rem">取消</a-button>
      </a-popconfirm>
      <a-button @click="handleSubmit" type="primary" :loading="confirmLoading"
        >提交</a-button
      >
    </div>
  </a-drawer>
</template>

<script>
import pick from "lodash.pick";
import { postAction } from "@/api/manage";
import { cond } from "lodash";
import { Getsteram, cameraEdit } from "@/api/api";

export default {
  name: "CameraEditModal",
  components: {},
  data() {
    return {
      editShow: false,
      editPtzShow: false,
      addresValue: true, //码流地址
      ptzValue: true, //云台地址
      record: {},
      cameraId: "",
      devId: undefined,
      ptzProtocolList: [],
      model: {},
      form: this.$form.createForm(this),
      validatorRules: {
        notBlank: {
          rules: [
            {
              required: true,
              message: "请输入必填项!",
            },
          ],
        },
      },
      title: "编辑",
      visible: false,
      modaltoggleFlag: true,
      confirmDirty: false,
      disableSubmit: false,
      labelCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 5,
        },
      },
      wrapperCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 16,
        },
      },
      modalWidth: 800,
      drawerWidth: 700,
      confirmLoading: false,
    };
  },
  created() {
    console.log(this.$route.params);
  },
  computed: {},
  methods: {
    //窗口最大化切换
    toggleScreen() {
      if (this.modaltoggleFlag) {
        this.modalWidth = window.innerWidth;
      } else {
        this.modalWidth = 800;
      }
      this.modaltoggleFlag = !this.modaltoggleFlag;
    },
    show(record) {
      this.record = record;
      this.cameraId = record.cameraId;
      console.log(record);
      // 调用此方法,根据屏幕宽度自适应调整抽屉的宽度
      this.resetScreenSize();
      this.form.resetFields();

      // 地址显示判断
      // if (this.record.streamAddr == null || this.record.streamAddr == "") {
      //   this.editShow = true;
      // }
      // if (this.record.ptzAddr == null || this.record.ptzAddr == "") {
      //   this.editPtzShow = true;
      // }

      try {
        this.ptzProtocolList = record.ptzProtocolGroup.split(";");
        //绑定数据
      } catch (e) {
        //TODO handle the exception
        console.log("获取云台协议组失败！" + e);
      }
      this.model = Object.assign({}, record);
      this.visible = true;
      this.$nextTick(() => {
        this.form.setFieldsValue({
          devName: record.devName,
          devCode: record.devCode,
          relationDeviceIndex: record.relationDeviceIndex,
          name: record.name,
          cameraDesc: record.cameraDesc,
          location: record.location,
          used: record.used,
          streamAddr: record.streamAddr,
          hasPtz: record.hasPtz,
          ptzAddr: record.ptzAddr,
          ptzPort: record.ptzPort,
          ptzProtocol: record.ptzProtocol,
        });
      });
    },
    // 重新获取码流地址
    streamAddrs() {
      const that = this;
      let params = { id: this.cameraId, status: 1 };
      Getsteram(params).then((res) => {
        if (res.code == "00000") {
          that.$message.success("获取成功");
          console.log(res.data);
          that.form.setFieldsValue({
            streamAddr: res.data,
          });
        } else {
          that.$message.warning(res.msg);
          console.log(this.record);
        }
      });
    },
    // 编辑码流地址
    editAddrs() {
      this.addresValue = false;
    },
    // 重新获取云台地址
    ptzAddrs() {
      const that = this;
      let params = { id: this.cameraId, status: 2 };
      Getsteram(params).then((res) => {
        if (res.code == "00000") {
          this.$message.success("获取成功");
          //重新获取新的地址
          console.log(res.data);
          that.form.setFieldsValue({
            ptzAddr: res.data,
          });
        } else {
          this.$message.warning(res.msg);
        }
      });
    },
    // 编辑云台地址
    ptzEditAddrs() {
      this.ptzValue = false;
    },
    close() {
      this.$emit("close");
      this.visible = false;
      this.disableSubmit = false;

      //码流、云台地址  禁用
      this.addresValue = true;
      this.ptzValue = true;
    },
    handleSubmit() {
      //编辑设备
      const that = this;
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true;
          let formData = Object.assign(this.model, values);
          console.log(formData);
          postAction("/dev/camera/edit", formData)
            .then((res) => {
              if (res.code == "00000") {
                //子类绑定父类引组件的方法
                that.$emit("ok");
                that.$message.success("操作成功");
              } else {
                that.$message.warning("操作失败" + res.msg);
              }
            })
            .finally(() => {
              that.confirmLoading = false;
              that.close();
            });
        }
      });
    },
    handleCancel() {
      this.close();
    },
    // 根据屏幕变化,设置抽屉尺寸
    resetScreenSize() {
      let screenWidth = document.body.clientWidth;
      if (screenWidth < 500) {
        this.drawerWidth = screenWidth;
      } else {
        this.drawerWidth = 700;
      }
    },
  },
};
</script>

<style scoped>
.avatar-uploader > .ant-upload {
  width: 104px;
  height: 104px;
}
.ant-upload-select-picture-card i {
  font-size: 49px;
  color: #999;
}
.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
.ant-table-tbody .ant-table-row td {
  padding-top: 10px;
  padding-bottom: 10px;
}
.drawer-bootom-button {
  position: absolute;
  bottom: -8px;
  width: 100%;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  left: 0;
  background: #fff;
  border-radius: 0 0 2px 2px;
}
</style>
